<template>
	<view>		
	  <u-toast ref="uToast"></u-toast>
		<template>
			<u-swiper :list="imgs" indicator indicatorMode="line" circular keyName="image" height="200px">
				
			</u-swiper>
		</template>
		<div class="green">
			<div class="price">
				￥{{goods.saleprice}}
			</div>
			<div class="shoumai">
				<div>已售{{goods.stock}}件</div>
				<div>还剩{{goods.lowstock}}件</div>
			</div>
		</div>
		
		<u-popup :show="show" @close="close" @open="open"  >
		            <view>
						<div  class="prpup_top">
							<div><image :src="imgs[0]" style="width: 70px; height: 70px;"></image></div>
							<div style="display: flex; flex-direction: column;">
								<div style=" width: 90% ; font-size: 15px;">{{goods.gname}}</div>
								<div style="color: red; font-size: 24px;">￥{{goods.saleprice}}</div>		
							</div>
						</div>
						<div class="prpup_mid">
							<div><p>购买数量</p>
							<p>仅剩{{goods.lowstock}}件</p>
							</div>
							<div>
								<u-number-box v-model="value" @change="valChange"></u-number-box>
								
							</div>
						</div>
						<div class="prpup_bom">
							<u-button type="primary" text="加入购物车" color="green" shape="circle" @click="add"></u-button>
						</div>
					</view>
				</u-popup>
	
	
	
	
	
		<div class="text">
		<div class="top">{{goods.gname}}</div>
		<div class="description">{{goods.description}}</div>
		</div>
		
		<div class="time" ><image src="/static/image/快递.png" style="width: 20px; height: 20px;"></image><p>到货时间：4月25日</p></div>
		
		<div class="tpzs">
			<div class="tpzs_top">
				<p>商品详情</p>
				<hr />
				</div>
			<div class="tpzs_img">
				<div v-for="item in imgs">
					<image :src="item"></image>
				</div>
				
			</div>
			
		</div>
		
		
		
		
	<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car" @click="showCart">
					<u-badge class="car-num"style="position: absolute;" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="40" :color="$u.color['contentColor']">
						{{stata.cartnum}}
					</u-icon>
					<view class="text u-line-1" >购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="show = true" >加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		
		</view>
		</view>
</template>


<script>
import { API_BASE_URL } from '../../utils/appConfig';
import { getGoods, getGoodsdetail } from '../API/goods/goods';
import { addCart } from '../API/cart/cart';
import {mapState,mapActions} from 'vuex'

	export default {
	
		data(){
			return{
				gid:null,
				goods:[],
				img:[],
				imgs:[],
				show: false,
				value: 1,
				stata:{
					cartnum:this.$store.state.total
				}
			}
			
		},
		
			
		computed:{
			...mapState(['total'])
		},
		
		onLoad(options){
			console.log(options)
			this.gid = options.id
			this.changeCartTotal()
		},
		created() {
			this.getgoods()
		},
		methods:{
			...mapActions(['changeCartTotal']),
			
			
			getgoods(){
					getGoodsdetail(this.gid).then(res =>{
					this.goods = res.data;
					this.img = this.goods.gimg.split(",")
					 this.img.forEach(item =>{
						this.imgs.push(API_BASE_URL + item)
					})
					console.log(this.goods)
					console.log(this.imgs)
				})
			},
			 open() {
			          // console.log('open');
					  
			        },
			 close() {
			          this.show = false
			          // console.log('close');
			        },
			showCart(){
				console.log("123")
				uni.$u.route({
						url:'pages/cart/cart',
						type:'switchTab'
				})
			},
			valChange(e) {
							console.log('当前值为: ' + e.value)
						},
			add(){
				const cartgoods={
					goodsid:this.goods.gid,
					userid:3,
					price:this.goods.saleprice,
					quantity:this.value,
					issubmit:0,
				}
				addCart(cartgoods).then(res =>{
					console.log("加入成功");
					this.$refs.uToast.show({
						message:res.msg,
						complete:()=>{
							this.show = false
							this.changeCartTotal();
						}
					})
				})
			}
		},
	}
	
</script>


<style lang="scss" scoped>
	template{
		background-color: rgb(248, 248, 248);
	}
	.green{
		background-color: rgb(16, 153, 6);
		width: 100%;
		height: 50px;
		display: flex;
	}
	.price{
		color: white;
		font-size: 30px;
		width: 60%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.shoumai{
		margin-left: auto;
		background-color: rgb(255, 245, 228);
		width: 40%;
		color: red;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.text{
		background-color: rgb(255, 255, 255);
		width: 95%;
		border-radius: 5%;
		
		margin: 10px auto;
	}
	.top{
		
		font-size: 24px;
		line-height: 1.5;
	}
	.description{
		line-height: 2;
		color: gray;
	}
		
	.time{
		border-radius: 5%;
		width: 95%;
		height: 40px;
		line-height: 40px;
		margin: 10px auto;
		background-color: rgb(255, 255, 255);
		font-size: 17px;
		display: flex;
		align-items: center;

	}
	.time>image{
		margin-right: 10px;
	}
	.tpzs{
		width: 95%;
		background-color:rgb(255, 255, 255) ;
		margin: 10px auto;
	}
	.tpzs_top{
		font-size: 20px;
		font-weight: 600;
		text-align: center;
	}
	.tpzs_top>hr{
		height: 3px;
		width: 40px;
		text-align: center;
		margin: 10px auto;
		background-color: red;
		border: 0;
	}
	.tpzs_img>div{
		margin:10px auto;
		text-align: center;
		
	}
	
	
	
	.navigation {
		display: flex;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;
		position: fixed;
		z-index: 1000;
		left: 0;
		bottom: 0;
		.left {
			display: flex;
			font-size: 20rpx;
			.item {
				text-align: center;
				margin: 0 30rpx;
				&.car {
					text-align: center;
					position: relative;
					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}
		.right {
			display: flex;
			font-size: 22rpx;
			align-items: center;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}
			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
				
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
	
	
	
	.prpup_top{
		width: 90%;
		margin: auto auto;
		display: flex;
		
		
	}
	
	
	.prpup_mid{
		display: flex;
		font-size: 18px;
		width: 90%;
		margin: auto auto;
	}
	.prpup_mid>div:nth-child(1)>p:nth-child(2){
		color: gray;
		font-size: 15px;
	}
	.prpup_mid>div:nth-child(2){
		margin-left: auto;
	}
	.prpup_bom{
		margin-top: 10px;
	}
</style>